<template>
  <div>
    <el-button type="success" @click="openAddDialog">添加</el-button>
    <el-button type="primary" @click="del">删除</el-button>
    <!-- 表格 -->
    <el-table
        :data="paginatedData"
        @selection-change="selecte"
        border
        style="width: 900px; margin: 3px 0;"
    >
      <el-table-column type="selection" width="50"></el-table-column>

      <el-table-column prop="id" width="100" label="编号" />
      <el-table-column prop="name" width="130" label="姓名" />
      <el-table-column prop="web" label="网站" />
      <el-table-column prop="date" label="日期" />

      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button
              size="small"
              type="primary"
              @click="edit(scope.row)"
          >
            编辑
          </el-button>
          <el-button
              size="small"
              type="danger"
              @click="deleteSingle(scope.$index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加数据的弹窗 -->
    <el-dialog title="添加信息" v-model="addDialogVisible">
      <el-form :model="newItem">
        <el-form-item label="编号">
          <el-input v-model="newItem.id" placeholder="请输入编号" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="newItem.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="网站">
          <el-input v-model="newItem.web" placeholder="请输入网站" />
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
              v-model="newItem.date"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addItem">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑信息" v-model="editDialogVisible">
      <el-form :model="editItem">
        <el-form-item label="编号">
          <el-input v-model="editItem.id" disabled />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="editItem.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="网站">
          <el-input v-model="editItem.web" placeholder="请输入网站" />
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
              v-model="editItem.date"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </div>
    </el-dialog>

    <!-- 分页组件 -->
    <el-pagination
        background
        layout="prev, pager, next, jumper, total"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="test_data.arr.length"
        @current-change="handlePageChange"
        style="margin-top: 10px"
    />
  </div>
</template>

<script setup>
import {ref, computed} from "vue";
import {ElMessageBox, ElMessage} from 'element-plus'

const test_data = ref({
  arr: [
    { id: '1', name: '邓瑞', web: 'dengruicode.com', date: '2023-06-20' },
    { id: '2', name: 'David', web: 'www.dengruicode.com', date: '2023-06-21' },
    { id: '3', name: 'Luna', web: 'dengruicode.com', date: '2023-06-22' },
    { id: '4', name: 'Lisa', web: 'www.dengruicode.com', date: '2023-06-22' },
    { id: '1', name: '邓瑞', web: 'dengruicode.com', date: '2023-06-20' },
    { id: '2', name: 'David', web: 'www.dengruicode.com', date: '2023-06-21' },
    { id: '3', name: 'Luna', web: 'dengruicode.com', date: '2023-06-22' },
    { id: '4', name: 'Lisa', web: 'www.dengruicode.com', date: '2023-06-22' },
    { id: '5', name: 'Michael', web: 'techworld.com', date: '2023-06-23' },
    { id: '6', name: 'Sophia', web: 'example.org', date: '2023-06-24' },
    { id: '7', name: 'John', web: 'example.com', date: '2023-06-25' },
    { id: '8', name: 'Emily', web: 'techportal.net', date: '2023-06-26' },
    { id: '9', name: 'James', web: 'dengruicode.com', date: '2023-06-27' },
    { id: '10', name: 'Olivia', web: 'websource.co', date: '2023-06-28' }
  ]
})

// 选中的复选框
let idArr = []
const selecte = (selectedRows) => {
  idArr = selectedRows.map((item) => item.id)
}

// 删除选中的行
const del = () => {
  if (idArr.length === 0) {
    ElMessage.warning('请先选择要删除的项')
    return
  }
  ElMessageBox.confirm('确定要删除选中的数据吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    test_data.value.arr = test_data.value.arr.filter(
        (item) => !idArr.includes(item.id)
    )
    idArr = [] // 删除后重置选中的ID数组
    ElMessage.success('删除成功')
  })
}

// 删除单行
const deleteSingle = (index) => {
  ElMessageBox.confirm('确定要删除这条数据吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    test_data.value.arr.splice(index, 1)
    ElMessage.success('删除成功')
  })
}

// 编辑
// 控制编辑弹窗的显示与隐藏
const editDialogVisible = ref(false)
const editItem = ref({}) // 存储当前编辑的数据

// 编辑按钮点击事件
const edit = (row) => {
  editItem.value = { ...row } // 复制当前行的数据到 editItem
  editDialogVisible.value = true // 显示弹窗
}

// 保存编辑后的数据
const saveEdit = () => {
  const index = test_data.value.arr.findIndex(item => item.id === editItem.value.id)
  if (index !== -1) {
    test_data.value.arr[index] = { ...editItem.value } // 更新数据
    ElMessage.success('编辑成功')
  }
  editDialogVisible.value = false // 关闭弹窗
}

// 添加数据相关
const addDialogVisible = ref(false)
const newItem = ref({
  id: '',
  name: '',
  web: '',
  date: ''
})

// 打开添加数据的弹窗
const openAddDialog = () => {
  newItem.value = {
    id: '',
    name: '',
    web: '',
    date: ''
  }
  addDialogVisible.value = true
}

// 添加数据到表格
const addItem = () => {
  if (
      !newItem.value.id ||
      !newItem.value.name ||
      !newItem.value.web ||
      !newItem.value.date
  ) {
    ElMessage.warning('请完整填写所有信息')
    return
  }

  // 检查日期是否为 Date 对象，并格式化为 YYYY-MM-DD
  let formattedDate;
  if (newItem.value.date instanceof Date) {
    formattedDate = `${newItem.value.date.getFullYear()}-${String(newItem.value.date.getMonth() + 1).padStart(2, '0')}-${String(newItem.value.date.getDate()).padStart(2, '0')}`;
  } else {
    // 如果不是 Date 对象，直接使用原值
    formattedDate = newItem.value.date;
  }

  // 添加数据到表格
  test_data.value.arr.push({ ...newItem.value, date: formattedDate });
  addDialogVisible.value = false;
  ElMessage.success('添加成功');
}

// 分页状态变量
const currentPage = ref(1)
const pageSize = ref(5)

// 计算当前页的数据
const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return test_data.value.arr.slice(start, end)
})

// 页码变化时的回调函数
const handlePageChange = (page) => {
  currentPage.value = page
}
</script>

<style scoped>
</style>